/**
 * Author: Lily Jiang
 * Create Time: 2019/9/3
 * Description:
 */

import React from "react";
import {connect} from "react-redux";
import {Link} from 'react-router-dom';
import AppHeader from '@/components/appHeader/Index.js'
import './Index.scss'
import * as actions from "@/store/actions";


class userIndex extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    changeTheme = () => {
        this.props.dispatch(actions.changeTheme(this.props.themeType === 'night' ? 'day' : 'night'));
    }

    render() {
        return (
            <div className="app-container page_user-index">
                {<AppHeader></AppHeader>}

                <div className="main">
                    <div className="header">
                        <div className="header-img" style={{backgroundImage: `url(${this.props.userInfo.head_img})`}}></div>
                        <div className="username">{this.props.userInfo.username || '未登录'}</div>
                    </div>

                    <div className="nav">
                        <Link to="/user/collect" className="nav-item df-c ubt_1px">
                            <div className="df1">我的收藏</div>
                            <i className="right-arrow c999"></i>
                        </Link>
                        <Link to="/message" className="nav-item df-c ubt_1px">
                            <div className="df1">消息中心</div>
                            <i className="right-arrow c999"></i>
                        </Link>
                    </div>
                </div>

                <div className="footer">
                    <div className="footer-item" onClick={this.changeTheme}>
                        <img src={require("../../assets/images/common/yuliang_hei.png")} alt=""/>
                        <div>{this.props.themeType === 'night' ? '日间模式' : '夜间模式'}</div>
                    </div>
                    <Link to="/settings" className="footer-item">
                        <img src={require("../../assets/images/common/shezhi_hei.png")} alt=""/>
                        <div>设置</div>
                    </Link>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        userInfo: state.app.user,
        isLogin: state.app.isLogin,
        themeType: state.app.themeType
    }
}
export default connect(mapStateToProps)(userIndex)